<template>
    <div class="box">
        <header class="header">
            <van-nav-bar
                title="嗨购登录"
                left-arrow
                @click-left="$router.back()"
            >
            </van-nav-bar>
        </header>
        <div class="content">

            <div class="form" v-if="type === '2' " >
                <van-field v-model="loginname" placeholder="用户名/手机号/邮箱" clearable/>
                <van-field v-model="password" type="password" placeholder="请输入密码" clearable/>  
                <div class="my-button">
                    <van-button class="button" color="#ff6666" :disabled="adminameFlag"  block round @click="adminameLoginFn">登录</van-button>
                </div>
            </div>

            <div class="form" v-else>
                <van-field class="input" v-model="tel" type="tel" placeholder="手机号码" clearable/>
                <van-field
                v-model="telcode"
                center
                clearable
                
                placeholder="请输入短信验证码"
                
                >
                    <template #buuton>
                        <van-button  size="small" type="primary" >{{text}}</van-button>
                    </template>
                </van-field>
                
                <div class="my-button">
                    <van-button color="#ff6666"  block round >登录</van-button>
                </div>
            </div>


              <!-- 登录方式以及 注册提示 -->
              <ul class="more">
                  <li @click="changeType">
                    <span v-if="type === '1'">账号密码登录</span>
                    <span v-else>短信验证码登录</span>
                  </li>
                  <router-link to="/register/step1" tag="li">
                        手机快速注册
                  </router-link> 
              </ul>
              <div class="my-divider">
                  <van-divider :style="{ fontSize:'12px' , color: 'rgba(0,0,0,.4)', borderColor: 'rgba(0,0,0,.2)', padding: '0 6px' }">其他方式登录</van-divider>
              </div>
              <div class="my-login-type">
                  <van-row type="flex" justify='center'>
                      <van-col span='6'>
                          <van-image :src='qq'  width="48" height="48"></van-image>
                          <p>QQ</p>
                      </van-col>
                      <van-col span='6'>
                          <van-image :src='wx'  width="48" height="48"></van-image>
                           <p>微信</p>
                      </van-col>
                      <van-col span='6'>
                          <van-image :src='apple'  width="48" height="48"></van-image>
                           <p>苹果</p>
                      </van-col>
                  </van-row>
              </div>
        </div>
    </div>
</template>

<script>
import {Login} from "../../api/user"
import Vue from 'vue'
import { NavBar, Field, Button, Divider, Col, Row, Image as VanImage , Dialog ,Toast } from 'vant'
Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
Vue.use(Divider)
Vue.use(Col)
Vue.use(Row)
Vue.use(VanImage)

export default {
    data(){
        return{
            loginname:'',
            password:'',
            telcode:'',
            tel:"",
            type:'2',
            qq: '',
            wx: '',
            apple: '',

        }
    },
    methods:{
        adminameLoginFn(){
            console.log('登录');
            Login({loginname:this.loginname , password:this.password}).then(res => {
                console.log(res);
                if(res.data.code === '10010'){
                    Dialog.confirm({
                        message: '该用户不存在,是否现在前往注册',
                        confirmButtonText: '注册',
                        confirmButtonColor: '#ff6666',
                        cancelButtonText: '取消',
                        cancelButtonColor: '#999'
                    })
                    .then(() => {
                        this.$router.push('/register')
                    })
                    .catch(() => {
                        console.log('取消');
                    });
                }else if(res.data.code === '10011'){
                    Dialog.alert({
                        message: '密码错误，请重新输入',
                    }).then(() => {
                    // on close
                    });  
                }else{
                    Toast('登录成功')
                    localStorage.setItem('userid', res.data.data.userid) // 知道是谁
                    localStorage.setItem('token', res.data.data.token) // 后端验证用户的登录状态
                    localStorage.setItem('loginState', true) // 前端自检登录状态
                    //  修改状态管理器中的代码
                    this.$store.commit('changeLoginState' , true)
                    // 返回上一页
                    this.$router.back()

                }
            })
        },
        changeType(){
            console.log(111);
            this.type = this.type === '2' ? '1' :'2'
            console.log(this.type);
        }
    },
    computed: {
        adminameFlag () {
            if (this.loginname !== '' && this.password !== '') {
                return false
            } else {
                return true
            }
        }
    }
}
</script>

<style lang='stylus' scoped>
.more{
    font-size: 14px;
    color: lightslategrey;
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}
.content{
    padding: 0 25px;
}
.van-col{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.van-cell {
 border-bottom: 1px solid rgb(218, 216, 216);
}
/deep/.van-field__control{
    font-size: 16px;

    padding: 16px 0 6px;
}
.my-button{
    margin-top: 30px;
}
.button{
    height: 50px;
    font-size: 16px
}
.my-divider{
    margin-top: 0.8rem
}
</style>